<template>
	<view class="real-name-page">
		
		<view class="loading" v-if="!loading">
			
			<view v-if="userInfo.back_url && userInfo.face_url">
				<view class="section-box">
					<view class="s-title">请上传本人身份证照</view>
					<view class="s-sub">为有效保障您的租赁体验，提高订单审核效率，请填写与您身份证一致的信息，否则不会审核通过。</view>
					<view class="upload-box">
						<view class="item">
							<image :src="userInfo.face_url"></image>
						</view>
						<view class="item">
							<image :src="userInfo.back_url"></image>
						</view>
					</view>
				</view>
				
				<view class="section-box">
					<view class="set-form">
						<view class="note">
							<image src="/static/images/icon/warn.png"></image>
							<text>姓名与支付宝实名认证信息相关联且不可更改！</text>
						</view>
						<view class="item">
							<view class="label">真实姓名</view>
							<view>{{userInfo.real_name}}</view>
						</view>
						<view class="item">
							<view class="label">身份证号</view>
							<view>{{userInfo.card_id}}</view>
						</view>
					<!-- 	<view class="item">
							<view class="label">手机号码</view>
							<input type="text" class="set" placeholder="请输入" />
						</view> -->
					</view>
				</view>
			</view>
			
			<view v-else>
				<view class="section-box">
					<view class="s-title">请上传本人身份证照</view>
					<view class="s-sub">为有效保障您的租赁体验，提高订单审核效率，请填写与您身份证一致的信息，否则不会审核通过。</view>
					<view class="upload-box">
						<view class="item" @click="Sfzm">
							<image v-if="positive" :src="positive"></image>
							<image v-else-if="appType == 0" src="/static/images/real-name-face.png"></image>
							<image v-else-if="appType == 1" src="/static/images/real-name-face1.png"></image>
							<image v-else-if="appType == 2" src="/static/images/real-name-face2.png"></image>
							
							<view class="title">上传身份证人像面</view>
						</view>
						<view class="item" @click="Sfbm">
							<image v-if="back" :src="back"></image>
							<image v-else-if="appType == 0" src="/static/images/real-name-country.png"></image>
							<image v-else-if="appType == 1" src="/static/images/real-name-country1.png"></image>
							<image v-else-if="appType == 2" src="/static/images/real-name-country2.png"></image>
							<view class="title">上传身份证国徽面</view>
						</view>
					</view>
				</view>
				
				<view class="section-box">
					<view class="set-form">
						<view class="note">
							<image src="/static/images/icon/warn.png"></image>
							<text>姓名与支付宝实名认证信息相关联且不可更改！</text>
						</view>
						
						<view class="item">
							<view class="label">真实姓名</view>
							<view>{{name}}</view>
						</view>
						<view class="item">
							<view class="label">身份证号</view>
							<view>{{identityid}}</view>
						</view>
					<!-- 	<view class="item">
							<view class="label">手机号码</view>
							<input type="text" class="set" placeholder="请输入" />
						</view> -->
					</view>
				</view>
				
				
				<view v-if="appType == 1" class="section-box">
					<view class="s-title">个人脸照片</view>
					<view class="s-sub">拍摄时确保人脸<text>轮廓完整、清晰、亮度均匀。</text></view>
					<view class="demand-box">
						<view class="user-pic" @click="uploadFace">
							<view v-if="!user_face_url" class="upload-pic acea-row row-center-wrapper">
								<view class="add-wrapper">
									<image style="width: 24rpx;height: 24rpx;" src="../../static/images/add-face-url.png"></image>
									<text style="margin-top: 8rpx;font-size: 24rpx;line-height: 28rpx;">上传</text>
								</view>
							</view>
							<image class="user-face-url" v-else :src="user_face_url"></image>
						</view>
					</view>
				</view>
				
				<view v-else class="section-box">
					<view class="s-title">拍摄身份证规范要求</view>
					<view class="s-sub">大陆公民持有的本人有效二代身份证，拍摄时确保身份证 <text>边框完整、字体清晰、亮度均匀。</text></view>
					<view class="demand-box">
						<view class="item">
							<image v-if="appType == 0" src="/static/images/real-name-1.png"></image>
							<image v-else-if="appType == 1" src="/static/images/real-name-11.png"></image>
							<image v-else-if="appType == 2" src="/static/images/real-name-111.png"></image>
							<view class="title">正确示范</view>
						</view>
						<view class="item">
							<image v-if="appType == 0" src="/static/images/real-name-2.png"></image>
							<image v-else-if="appType == 1" src="/static/images/real-name-22.png"></image>
							<image v-else-if="appType == 2" src="/static/images/real-name-222.png"></image>
							<view class="title">曝光强烈</view>
						</view>
						<view class="item">
							<image v-if="appType == 0" src="/static/images/real-name-3.png"></image>
							<image v-else-if="appType == 1" src="/static/images/real-name-33.png"></image>
							<image v-else-if="appType == 2" src="/static/images/real-name-333.png"></image>
							<view class="title">边框缺失</view>
						</view>
						<view class="item">
							<image v-if="appType == 0" src="/static/images/real-name-4.png"></image>
							<image v-else-if="appType == 1" src="/static/images/real-name-44.png"></image>
							<image v-else-if="appType == 2" src="/static/images/real-name-444.png"></image>
							<view class="title">照片模糊</view>
						</view>
						
					</view>
				</view>
				
				<view class="fixed-one-btn" @click="next">
					<view class="f-btn app-btn-bg">确定提交</view>
				</view>
			</view>
			
			
		</view>
		
	</view>
</template>

<script>
	let app = getApp()
	import {
		HTTP_REQUEST_URL,
	} from '@/config/app';
	import {
		alibabaocr,
		attestation,
		getUserInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				appType: app.globalData.appType,
				positive: '',
				back: '',
				name: "",
				identityid: "",
				authPost: {},
				type: 0,
				userInfo: {},
				loading: true,
				user_face_url: ''
			}
		},
		onLoad(options) {
			const that = this
			if (options.type) {
				this.type == options.type
			}
			uni.showLoading({
				title: '加载中...'
			})
			that.loading = true
			getUserInfo().then(res => {
				that.userInfo = res.data
				uni.hideLoading()
				that.loading = false
			})
		},
		methods: {
			uploadFace() {
				let _th = this
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (res) => {
						const path = res.apFilePaths[0];
						uni.uploadFile({
							url: HTTP_REQUEST_URL + "/api/upload/image", //服务器地址
							sizeType: "compressed",
							fileType: "image", //ZFB必填,不然报错
							filePath: path, //这个就是我们上面拍照返回或者先中照片返回的数组
							name: "file",
							success: (uploadFileRes) => {
								let user_face_url = JSON.parse(uploadFileRes.data)
								_th.user_face_url = user_face_url.data.url
							}
						})
					}
				})
			},
			Sfzm() {
				let _th = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const path = res.apFilePaths[0];
						uni.uploadFile({
							url: HTTP_REQUEST_URL + "/api/upload/image", //服务器地址
							sizeType: "compressed",
							fileType: "image", //ZFB必填,不然报错
							filePath: path, //这个就是我们上面拍照返回或者先中照片返回的数组
							name: "file",
							success: (uploadFileRes) => {
								let positive = JSON.parse(uploadFileRes.data)
								_th.positive = positive.data.url
								_th.jiexi()
							}
						})
					}
				})
			},
			Sfbm() {
				let _th = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const path = res.apFilePaths[0];
						uni.uploadFile({
							url: HTTP_REQUEST_URL + "/api/upload/image", //服务器地址
							sizeType: "compressed",
							fileType: "image", //ZFB必填,不然报错
							filePath: path, //这个就是我们上面拍照返回或者先中照片返回的数组
							name: "file",
							success: (uploadFileRes) => {
								let back = JSON.parse(uploadFileRes.data)
								_th.back = back.data.url
								_th.jiexi()
							}
						})
					}
				})
			},
			jiexi() {
				if (this.positive != "" && this.back != "") {
					alibabaocr({
						face_url: this.positive,
						back_url: this.back,
					}).then(res => {
						console.log(res, "--a-a-a--a---");
						if (res.status == 200) {
							this.name = res.data.real_name;
							this.identityid = res.data.card_id
							this.authPost = res.data
							this.authPost.face_url = this.positive
							this.authPost.back_url = this.back
						}
					}, err => {
						uni.showToast({
						  title: err
						})
					})
				}
			},
			next() {
				const that = this
				if (this.name == "") {
				  uni.showToast({
				    title: "姓名不能为空",
				  });
				  return false;
				}
				if (this.identityid == "") {
				  uni.showToast({
				    title: "身份证号不能为空",
				  });
				  return false;
				}
				if (this.positive == "") {
				  uni.showToast({
				    title: "请上传身份证正面",
				  });
				  return false;
				}
				if (this.back == "") {
				  uni.showToast({
				    title: "请上传身份证背面",
				  });
				  return false;
				}
				if (this.user_face_url == "" && this.appType == 1) {
				  uni.showToast({
				    title: "请上传个人脸照片",
				  });
				  return false;
				}
				if (this.appType == 1) {
					this.authPost.user_face_url = this.user_face_url
				}
				attestation(this.authPost).then(res=> {
					if (res.status == 200) {
						
						
						uni.navigateBack()
					}
				})
			},
			renlian() {
				
			}
		}
	}
</script>

<style lang="scss">
	page { background-color: #F5F7FA; }
	.real-name-page {
		padding: 0 24rpx 140rpx 24rpx;
		
		.section-box {
			margin-top: 24rpx;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			
			.s-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 32rpx;
				text-align: left;
			}
			
			.s-sub {
				margin-top: 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				text-align: left;
				
				text {
					color: #FF271F;
				}
			}
		}
	
		.upload-box {
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;
			
			.item {
				width: 316rpx;
				text-align: center;
				
				
				image {
					width: 100%;
					height: 208rpx;
				}
				
				.title {
					margin-top: 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 28rpx;
				}
			}
		}
	
		.set-form {
			.note {
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				width: 100%;
				height: 64rpx;
				background: #FFF8EB;
				border-radius: 32rpx;
				
				image {
					width: 32rpx;
					height: 32rpx;
				}
				
				text {
					margin-left: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FF7029;
				}
			}
		
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 92rpx;
				
				&~.item {
					border-top: 2rpx solid #F5F5F5;
				}
				
				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #1F1F1F;
				}
				
				.set {
					flex: 1;
					font-size: 28rpx;
					color: #333;
					text-align: right;
					border: none;
				}
			}
		}
	
		.demand-box {
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;
			
			.item {
				width: 150rpx;
				
				image {
					width: 150rpx;
					height: 128rpx;
				}
				
				.title {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #1F1F1F;
					line-height: 24rpx;
					text-align: center;
				}
			}
		}
	}
	
	.user-pic {
		width: 202rpx;
		height: 202rpx;
		
		.upload-pic {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
			border: 2px dashed  #EBEBEB;
			
			.add-wrapper {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
		
		.user-face-url {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
	}
</style>